<!DOCTYPE HTML>
<html>
    <head>
        <title>基础折线图</title>
        <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
    <h1>测试</h1>
        <div id="container" style="max-width:800px;height:400px"></div>
        <script>
        var data1 = {{data1|safe}};
        var data2 = {{data2|safe}};
        var data3 = {{data3|safe}};
        var data4 = {{data4|safe}};
        var data5 = {{data5|safe}};
        </script>
        <script>

        var chart = Highcharts.chart('container', {   // 生成highcharts对象
            title: {                                 // 设置主标题
                    text: '主标题'
            },
            subtitle: {                                // 设置副标题
                    text: '副标题'
            },
            chart: {
                    backgroundColor: '#DCDCDC'       // 绘图背景颜色
            },
            yAxis: [{
                    title: {
                            text: 'y轴标题1'
                    },
                    tickPositions: [0,20],             // 固定y轴值
                    labels: {
                            format: '{value} m/s',    // y轴线的单位
                    }
            },{
                    title: {
                            text: 'y轴标题2'
                    },
                    tickPositions: [-90,0,90],         // 固定y轴值
                    labels: {
                            format: '{value} km/h',    // y轴线的单位
                    },
                    opposite:true                      // 让俩y轴分别在左右
            }],
            legend: {
                    layout: 'vertical',        // 每条线的解释是horizontal水平布局还是vertical垂直布局
                    align: 'right',            // 线解释部分  在绘图的左,中还右
                    verticalAlign: 'middle',  // 垂直方向 上,中还是下
                    borderWidth: 1            // 给标头加框,0是无边框
            },
            plotOptions: {
                    series: {
                            label: {
                                    connectorAllowed: false
                            },
                            pointStart: 0,    //X 轴起点
                            pointInterval: 1   //X 轴点间隔
                    }
            },
            series: [{
                    name: '安装，实施人员',
                    data: data1,
                    tooltip: {
                         valueSuffix: ' G'   // 线的值的单位
                    }
            }, {
                    name: '工人',
                    data: data2,
                    tooltip: {
                         valueSuffix: ' 单位工人'   // 线的值的单位
                    }
            }, {
                    name: '销售',
                    data: data3,
                    tooltip: {
                         valueSuffix: ' 单位销售'   // 线的值的单位
                    }
            }, {
                    name: '项目开发',
                    data: data4,
                    tooltip: {
                         valueSuffix: ' 单位项目开发'   // 线的值的单位
                    }
            }, {
                    name: '其他',
                    data: data5,
                    tooltip: {
                         valueSuffix: ' 单位其他'   // 线的值的单位
                    }
            }],
            responsive: {
                    rules: [{
                            condition: {
                                    maxWidth: 500
                            },
                            chartOptions: {
                                    legend: {
                                            layout: 'horizontal',
                                            align: 'center',
                                            verticalAlign: 'bottom'
                                    }
                            }
                    }]
            }
    });
        </script>
    </body>
</html>